<template>
	<HomeCard headName="操作记录" headIcon="sys-logs">
		<div class="home-logs-body">
			<template v-if="dataSource.length">
				<div class="home-audit-item" v-for="(item, index) in dataSource" :key="index">
					<!-- <div class="audit-info-item audit-icon"
            :title="applyTypeEnums[item.applyType].label"
            :class="[ `${applyTypeEnums[item.applyType].icon}-icon` ]">
            <svg-icon
              :icon-class="applyTypeEnums[item.applyType].icon"
            />
          </div> -->
					<div class="audit-info-item audit-status" style="margin-right: 0">
						<template v-if="item.applyType">
							<div class="audit-tag" :class="[`${applyTypeEnums[item.applyType]?.icon}`]">
								{{ applyTypeEnums[item.applyType]?.label }}
							</div>
						</template>
						<template v-else>
							<div></div>
						</template>
					</div>
					<div class="audit-info-item audit-proj">
						<span>{{ item.proName }}</span>
					</div>
					<div class="audit-info-item audit-desc">
						<span>任务描述：</span>
						<span>{{ item.taskName }}</span>
					</div>
					<div class="audit-info-item audit-idea">
						<span>审核意见：</span>
						<span>{{ item.opinion || '无' }}</span>
					</div>
					<div class="audit-info-item audit-type">
						<span v-if="actionTypeEnums[item.actionType]">
							<el-tag :hit="false" :type="actionTypeEnums[item.actionType]?.type" effect="dark">{{ actionTypeEnums[item.actionType]?.label }}</el-tag>
						</span>
						<span v-else>
							<el-tag :hit="false" effect="dark">{{ item.actionTypeName }}</el-tag>
						</span>
					</div>
					<div class="audit-info-item audit-time">
						<span>时间：</span>
						<span>{{ item.handleTime }}</span>
					</div>
				</div>
			</template>
			<template v-else>
				<StatusEmptyItem backColor="" />
			</template>
		</div>
	</HomeCard>
</template>

<script setup>
import HomeCard from './HomeCard.vue';
import StatusEmptyItem from './StatusEmptyItem.vue';

import { nextTick, onMounted, ref } from 'vue';
import { useTaskOperateLogApi } from '@/api';

const { taskOperateLogs } = useTaskOperateLogApi();
const applyTypeEnums = {
	1: { label: '储备项目', icon: 'reserve', type: 'info' },
	2: { label: '备选项目', icon: 'standby', type: 'success' },
};

const actionTypeEnums = {
	0: { label: '完　成', color: '#87d068', type: 'success' },
	1: { label: '撤　销', color: '#e6bd29', type: 'warning' },
	2: { label: '退　回', color: '#f50', type: 'danger' },
	3: { label: '完　成', color: '#87d068', type: 'success' },
};

const props = defineProps({
	title: { type: String, default: '审核日志' },
	cardList: {
		type: Array,
		default: () => {
			return [];
		},
	},
});
const dataSource = ref([]);
const loadData = () => {
	taskOperateLogs().then((resp) => {
		if (resp.code === 200) {
			dataSource.value = resp.data;
		}
	});
};
onMounted(() => {
	nextTick(() => {
		loadData();
	});
});
</script>

<style lang="scss" scoped>
.home-comb-panel {
	border-radius: 5px;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	color: rgba(0, 0, 0, 0.65);
	font-size: 14px;
	font-variant: tabular-nums;
	line-height: 1.5;
	list-style: none;
	font-feature-settings: 'tnum';
	position: relative;
	background: #fff;
	transition: all 0.3s;
	margin-bottom: 15px;
}
.home-audit-item {
	// border: 1px solid;
	display: flex;
	border-bottom: 1px solid #ececec;
	padding: 5px 5px;
	align-items: center;
	&:hover {
		background: #ececec;
	}
	.audit-icon {
		flex: none;
		width: 30px;
		height: 30px;
		padding: 0;
		background: antiquewhite;
		text-align: center;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		&.standby-icon {
			background: linear-gradient(50deg, #5176e9, #77e19d);
			color: #fff;
		}
		&.reserve-icon {
			background: linear-gradient(50deg, #79ba3a, #96c93e);
			color: #fff;
		}
	}
	.audit-proj {
		flex: 1;
	}
	.audit-tag {
		padding: 2px;
		background: linear-gradient(50deg, #5176e9, #77e19d);
		border-radius: 5px;
		color: #fff;
		font-weight: 600;
		&.standby {
			background: linear-gradient(50deg, #5176e9, rgba(78, 136, 243, 0.6));
			color: #fff;
		}
		&.reserve {
			background: linear-gradient(50deg, #79ba3a, #96c93e);
			color: #fff;
		}
	}
	.audit-status {
		width: 80px;
		flex: none;
		text-align: center;
	}
	.audit-type {
		width: 150px;
		flex: none;
		text-align: center;
	}
	.audit-desc {
		text-align: left;
		width: 280px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.audit-idea {
		text-align: left;
		width: 280px;
		flex: none;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.audit-time {
		flex: none;
		width: 125px;
		// text-align: right;
	}
}
.home-logs-body {
	min-height: 220px;
	border: 1px solid #ececec;
	border-radius: 5px;
	padding: 10px;
	max-height: 550px;
	overflow: auto;
}
.audit-info-item {
	flex: 1;
	margin-right: 8px;
	padding: 5px 5px;

	&:last-child {
		margin-right: 0;
	}
}
</style>
